<template>
  <div class="home">
    <!-- 回顾vue的知识点 -->
    <h1 @click="say()">{{name}}</h1>
    <h1>{{myname}}</h1>
    <input type="text" v-model="age"  />
    <input type="text" v-model="obj.shengao">
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){  //vue的数据放置位置
    return {
        name:"张三",
        arr:[1,2,3],
        age:18,
        obj:{
          shengao:188,
          tizhong:170
        }
    }
  },
  methods: { //函数和事件函数的放置位置
    say(){
      alert(1)
    }
  },
  computed:{ //vue的计算属性  计算data数据或vuex数据
      myname(){
        return this.name.split("").reverse().join("")
      }
  },
  watch:{ //监听数据的变化 收集到新的值 和原来的值
    age(newVal,oldVal){
        console.log(newVal,oldVal)
    },
    obj:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
      },
      deep:true, //深度监听
      immediate:true//首次进入就监听
    }
  },
  beforeCreate(){ //vue实例创建前
      // 数据  根元素  函数 等都未初始化完成
  },
  created() { //vue实例创建后
      //  前后端交互
      // 数据 和函数 初始化完成  根元素未初始化
  },
  beforeMount() { //vue的实例挂载前
      // 数据 和函数 初始化完成  根元素初始化完成
  },
  mounted(){//vue实例挂载后
 // 数据 和函数 初始化完成  根元素初始化完成
  },
  beforeUpdate() { //组件更新前
    
  },
  updated() { //组件更新后
    
  },
  beforeDestroy() { //组件销毁前
    
  },
  destroyed() { //组件销毁后
    
  },

}
</script>
<style lang="less">
  
</style>